<!DOCTYPE html>
<html lang="en" class="ie8 no-js" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet"
          type="text/css"/>


    <style>
        .picutre_many img {
            width: 650px;
            height: 600px;
        }

    </style>


</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div class="row">
    <div class="col-md-12">
        <h3 class="page-title" style="padding-left:15px;margin-top:22px">
            店铺销售
            <small>管理系统</small>
        </h3>
        <hr />
    </div>

    <div>
        <center>
            <div id="list" class=" picutre_many" style="overflow: hidden; height:600px; width:1000px;margin-top:30px">
                <table cellspacing="0" cellpadding="0" style="width: 680px; border: 0px;">
                    <tr>
                        <td id="list1">
                            <table style="border: 0px;" cellpadding="0" cellspacing="0">
                                <tr id="pic">
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/112.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/103.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/1011.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/105.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/106.png"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/108.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/110.jpg"/></td>
                                    <td><img style="border: 0px;" alt="" src="../../resources/img/111.jpg"/></td>
                                </tr>
                            </table>
                        </td>
                        <td id="list2"></td>
                    </tr>
                </table>
            </div>
        </center>
    </div>
</div>
</body>
<script type="text/javascript">

    // <![CDATA[
    /*图片滚动效果*/
    var speedpic = 20;//速度数值越大速度越慢
    document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
    function Marqueepic() {
        if (document.getElementById("list2").offsetWidth
                - document.getElementById("list").scrollLeft <= 0) {
            document.getElementById("list").scrollLeft -= document
                    .getElementById("list1").offsetWidth;
        } else {
            document.getElementById("list").scrollLeft++;
        }
    }
    var MyMarpic = setInterval(Marqueepic, speedpic);

    document.getElementById("list").onmouseover = function () {
        clearInterval(MyMarpic);
    }
    document.getElementById("list").onmouseout = function () {
        MyMarpic = setInterval(Marqueepic, speedpic);
    }
    // ]]>

</script>
</html>
